import React from 'react';
import './OurBlogs.scss';
import Image from 'next/image';
import SvgIcon from '@/components/SvgIcon';
import Link from 'next/link';

function OurBlogs() {
  const blogs = [
    {
      url: '/blog/ecommerce-growth-hacks?foo=foome&bar=goodday#haha',
      image:
        'https://cdn.shopify.com/s/files/1/0583/0901/7796/files/DSZ-BlogBanner_GrowthHacks_400x249_cb2e6c46-9045-4ec7-b079-0bc4c21526c5.jpg?v=1714086407',
      title: 'Ecommerce Growth Hacks To Implement Today in 2024',
      desc: 'Preview text: Growth hacking is a marketing strategy focused on achieving exponential growth through low-cost, innovative and unconventional strategies. Click here to find out more.',
    },
    {
      url: '/blog/use-tiktok-to-grow-your-dropshipping-store',
      image:
        'https://cdn.shopify.com/s/files/1/0583/0901/7796/files/download.jpg?v=1704946038',
      title: 'How to Use TikTok to Grow Your Dropshipping Store in 2024',
      desc: 'Preview text: In recent years, TikTok has turned its attention to ecommerce. There are multiple ways that businesses can use TikTok beyond simple social media marketing.',
    },
    {
      url: '/blog/how-to-become-dropship-supplier',
      image:
        'https://cdn.shopify.com/s/files/1/0583/0901/7796/files/download_2_40c03966-8f9b-4b59-851d-df62cb139768.jpg?v=1704950549',
      title: 'How to Become a Dropship Supplier in 2024',
      desc: 'Preview text: In every dropshipping business, a dropship supplier has a crucial role to play. Click here to find out how you can become a dropship Supplier in 2024.',
    },
  ];

  return (
    <div className="our-blogs main-width">
      <div className="our-blogs-inner content-width">
        <div className="our-blogs-hd floor-hd flex-row items-center">
          <div className="title floor-hd-title">CHECK OUT OUR LATEST</div>
          <div className="line floor-hd-line"></div>
        </div>

        <div className="our-blogs-bd">
          <div className="blog-list flex-row">
            {blogs.map((blog, index) => (
              <Link
                key={index}
                href={blog.url}
                className="blog-item-wrap flex-1"
              >
                <div className="blog-item flex-col">
                  <div className="blog-img-wrap">
                    <Image src={blog.image} width={370} height={240} alt="" />
                  </div>
                  <div className="blog-title text-overflow-2">{blog.title}</div>
                  <div className="blog-desc">{blog.desc}</div>
                </div>
              </Link>
            ))}
          </div>

          <div className="btn-line ta-c">
            <a href="/blog" className="more-link">
              <button className="more-btn">
                CHECK OUT MORE BLOGS <SvgIcon name="arrow-right" size={16} />
              </button>
            </a>
          </div>
        </div>
      </div>
    </div>
  );
}

export default OurBlogs;
